
<!--图片裁剪-->
<div class="modal fade" id="image-crop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width:750px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">图片裁剪</h4>
            </div>
            <div class="modal-body">
                <div class="container" style="padding: 0 0; width:100%;">
                    <div class="col-md-7">
                        <!-- <h3 class="page-header">Demo:</h3> -->
                        <div class="img-container">
                            <img src="/Public/images/picture.jpg" alt="Picture">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <!-- <h3 class="page-header">Preview:</h3> -->
                        <div class="docs-preview clearfix">
                            <div class="img-preview preview-lg"></div>
                        </div>
                        <!-- <h3 class="page-header">Data:</h3> -->
                        <div class="docs-data">
                            <form action="{:U('imgcrop')}" method="post" name='imgcrop' id='imgcrop'>
                                <div class="input-group hidden">
                                    <label class="input-group-addon" for="dataX">X</label>
                                    <input class="form-control" id="dataX" name='x' type="text" placeholder="x">
                                    <span class="input-group-addon">px</span>
                                </div>
                                <div class="input-group hidden ">
                                    <label class="input-group-addon" for="dataY">Y</label>
                                    <input class="form-control" id="dataY" type="text" name="y" placeholder="y">
                                    <span class="input-group-addon">px</span>
                                </div>
                                <div class="input-group hidden  ">
                                    <label class="input-group-addon" for="dataWidth">Width</label>
                                    <input class="form-control" id="dataWidth" type="text" name="w" placeholder="width">
                                    <span class="input-group-addon">px</span>
                                </div>
                                <div class="input-group hidden ">
                                    <label class="input-group-addon" for="dataHeight">Height</label>
                                    <input class="form-control" id="dataHeight" type="text" name="h" placeholder="height">
                                    <span class="input-group-addon">px</span>
                                </div>
                                <div class="input-group">
                                    <label class="input-group-addon">切后图片尺寸</label>
                                    <input class="form-control" id="dataSizeW" type="text" name="dataSize" value="200" readonly="readonly" placeholder="切后图片宽">
                                    <input class="form-control" id="dataSizeH" type="text" name="dataSize" value="200" readonly="readonly" placeholder="切后图片高">
                                    <span class="input-group-addon">px</span>
                                </div>
                                <div class="input-group">
                                    <label class="input-group-addon hidden">图片路径</label>
                                    <input class="form-control" type="hidden" value="" name="imgurl" id="imgurl"/>
                                    <span class="input-group-addon hidden"></span>
                                </div>

                            </form>
                        </div>
                        <div class="btn-group" style="margin-top:30px;" data-toggle="buttons">
                            <label class="btn btn-primary" data-method="setAspectRatio" data-option="1" title="Set Aspect Ratio">
                                <input class="sr-only" id="aspestRatio3" name="aspestRatio" value="1" type="radio">
                                <span class="docs-tooltip" data-toggle="tooltip" title="裁剪框：(1 / 1)">
                                    1:1
                                </span>
                            </label>
                            <label class="btn btn-primary" data-method="setAspectRatio" data-option="NaN" title="Set Aspect Ratio">
                                <input class="sr-only" id="aspestRatio5" name="aspestRatio" value="NaN" type="radio">
                                <span class="docs-tooltip" data-toggle="tooltip" title="裁剪框：自由大小">
                                    Free
                                </span>
                            </label>
                            <label class="btn btn-primary btn-upload uppic" title="Upload image file" for="inputImage">

                                <input type='hidden' value='' name='imgfile' >
                                <span class="docs-tooltip" title="" data-toggle="tooltip" data-original-title="Import image with Blob URLs">
                                    上传
                                </span>
                            </label>
                        </div>
                    </div> 
                </div>
            </div>
            <div class="modal-footer">
                <p class="pull-left text-left"><small>No storage, processing, transmission, release any secret, pornography,<br>
                        violence, infringement  and other illegal content</small></p>
                <button type="button"  id="btn_save"  class="btn btn-danger btn-radius">Save</button>
                <button type="button"  id="btn_cancel"  class="btn btn-default btn-radius" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>

</div>
<input id="inputImage" class="sr-only" type="file" name="file">
<a data-toggle="modal" data-target="#image-crop" class="image-dialog-open"></a>
<script type="text/javascript">
    $(function () {

        //打开上传图片按钮
        $(".uppic").click(function () {
            $("#inputImage").click();
        });
        //图片保存，表单提交到 php方法经行图片裁剪
        $('#inputImage').on("change", function () {
            var oldimg = $("#imgurl").val(); //上传后的图片路径
            var imgfile = $("input[name='imgfile']").val();//图片保存文件夹
            $.ajaxFileUpload({
                url: up_pic_url,
                secureuri: false,
                fileElementId: 'inputImage',
                type: 'POST',
                data: {oldimg: oldimg, imgfile: imgfile, },
                dataType: 'eval',
                success: function (data) {
                    $('#inputImage').val("");
                    if (data !== "false") {
                        $("#imgurl").val(data);
                       dialogOpen()

                    }
                }
            });
        });
        $("#btn_save").click(function () {
            var x = $("#dataX").val();
            var y = $("#dataY").val();
            var w = $("#dataWidth").val();
            var h = $("#dataHeight").val();
            var targw = $("#dataSizeW").val();
            var targh = $("#dataSizeH").val();
            var src = $("#imgurl").val();
            $.ajax({
                url: imgcrop_url,
                type: 'POST',
                data: {x: x, y: y, w: w, h: h, src: src, targw: targw, targh: targh},
                dataType: 'json',
                success: function (data) {
                    if (data !== "false") {
                        dialogClose();
                         $(".picurl").attr("value", data);
                        $(".imgshow").attr("src", data);
                    }
                }
            });
        })
        $("#btn_cancel").click(function () {
            $(".image-dialog-close").click();
            var imgurl = $("#imgurl").val();//上传后的图片路径
            $.ajax({
                url: imgdel_url,
                type: 'POST',
                data: {imgurl: imgurl},
                dataType: 'json',
                success: function (data) {

                }});
        });

        function dialogOpen() {
            if ($("#image-crop").css('display') == "none") {
                $(".image-dialog-open").click();
            }
        }
        function dialogClose() {
            if ($("#image-crop").css('display') == "block") {
                $(".image-dialog-open").click();
            }
        }
    });
</script>

